<template>
  <el-container>
    <el-header> 疫情知识问答 </el-header>
    <el-main>
      <el-row>
        <el-col :span="24"
          ><div class="grid-content bg-purple-dark">
            <div v-for="(test, index) in tests" :key="index">
              <p>{{ index + 1 }}.{{ test.timu }}</p>
              <el-checkbox-group v-if="test.type == '多选'" v-model="test.da">
                <!-- label绑定答案的值,可以绑定索引index -->
                <el-checkbox
                  v-for="(city, index) in test.xuanxiang"
                  :label="index"
                  :key="index"
                  >{{ city }}</el-checkbox
                >
              </el-checkbox-group>
              <el-radio-group v-else-if="test.type == '单选'" v-model="test.da">
                <el-radio
                  v-for="(city, index) in test.xuanxiang"
                  :label="index"
                  :key="index"
                  >{{ city }}</el-radio
                >
              </el-radio-group>
            </div>
            <br /></div
        ></el-col>
      </el-row>
    </el-main>
    <h3>题号:</h3>
    <div class="tihao">
      <div v-for="(test, index) in tests" :key="index">
        <span v-if="test.da.length == '0'" class="ti">
          {{ index + 1 }}
        </span>
        <span v-else class="ti active">{{ index + 1 }}</span>
      </div>
    </div>
    <div class="up">
      <el-button @click="submitCount" type="primary">提交考卷</el-button>
    </div>
  </el-container>
</template>

<script>
export default {
  data() {
    return {
      tests: [
        {
          timu: "新型冠状病毒会人传人吗?",
          type: "单选",
          xuanxiang: [
            "A.会，虽然来源不明确，但具备在人与人之间传播的能力",
            "B.不会，主要是动物之间的传播",
          ],
          // 答案存放字符串
          da: "",
        },
        {
          timu: "哪类人群感染新型冠状病毒后，病情进展相对更快，严重程度更高?",
          type: "单选",
          xuanxiang: [
            "A.中小学生",
            "B.免疫功能较差的人群，例如老年人、孕产妇或存在肝肾功能障碍的人群",
            "C.上班族",
          ],
          // 答案存放字符串
          da: "",
        },
        {
          timu: "与新型冠状病毒患者近距离接触过，需要隔离多少天？",
          type: "单选",
          xuanxiang: ["A.2-3天", "B.7天", "C.14天", "D.21天"],
          // 答案存放字符串
          da: "",
        },
        {
          timu: "怎样正确戴口罩？",
          type: "单选",
          xuanxiang: [
            "A.要分清口罩的内外、上下，浅色面朝外，深色面朝内",
            "B.为了节约，口罩可以两面轮流佩戴",
            "C.戴口罩时，要将折面完全展开，完全包住嘴、鼻、下颌，然后压紧鼻夹，使口罩与面部完全贴合",
            "D.将口罩有金属条(鼻夹)的一端戴在下方",
          ],
          // 答案存放字符串
          da: "",
        },
        {
          timu: "室内用食用醋能杀灭新型冠状病毒？",
          type: "单选",
          xuanxiang: [
            "A.能，食用醋有杀菌消毒效果",
            "B.不能，食用醋所含醋酸浓度很低，达不到消毒效果，同时易对人的眼睛和呼吸道造成刺激",
          ],
          // 答案存放字符串
          da: "",
        },
        {
          timu: "此前接种了流感疫苗的人就不容易被新型冠状病毒感染了吗？",
          type: "单选",
          xuanxiang: [
            "A.是的，接种过流感疫苗的人不易被新型冠状病毒感染",
            "B.不是，流感疫苗主要是预防流感的，对新型冠状病毒无预防作用，所以接种了流感疫苗仍有可能感染新型冠状病毒，也可能出现严重症状",
          ],
          // 答案存放字符串
          da: "",
        },
        {
          timu: "目前对于新型冠状病毒的治疗方法是?",
          type: "多选",
          xuanxiang: [
            "A.已有特定治疗方法",
            "B.暂时没有特定治疗方法，但是可以对症处理",
            "C.对感染者的辅助护理能提高治疗效果",
            "D.大量使用抗菌药物治疗",
          ],
          // 答案存放数组
          da: [],
        },
        {
          timu: "如果成为密切接触者，应该怎么做?",
          type: "多选",
          xuanxiang: [
            "A.不要随便外出",
            "B.居家医学隔离观察",
            "C.做好自我身体状况观察",
            "D.如出现发热、咳嗽等症状，要及时向当地随访医生报告，在其指导下到指定医疗部门进行排查、诊治",
          ],
          // 答案存放数组
          da: [],
        },
        {
          timu: "新型冠状病毒感染者就医时应如何做?",
          type: "多选",
          xuanxiang: [
            "A.正确佩戴口罩，最好是一次性医用口罩",
            "B.主动告知医生自己的接触史",
            "C.主动告知医生自己的旅行史",
            "D.认为自己不是被感染者，向医生隐瞒病情",
          ],
          // 答案存放数组
          da: [],
        },
        {
          timu: "怀疑自己有新型冠状病毒感染的症状怎么办?",
          type: "多选",
          xuanxiang: [
            "A.不要去上班或上学",
            "B.主动戴口罩到就近的定点救治医院发热门诊就诊",
            "C.加强居家通风和消毒",
            "D.到网络上寻找治疗偏方",
          ],
          // 答案存放数组
          da: [],
        },
      ],
    };
  },
  computed: {},
  methods: {
    submitCount() {
      console.log("提交试卷");
      // 是否答完
      let isComplete = true;
      this.tests.forEach((val, i) => {
        if (val.da.length == 0) {
          isComplete = false;
          return;
        }
      });

      if (isComplete) {
        // 答题完整,可以提交,在这里进行提交数据操作
        alert(
          "交卷成功!此次成绩将在不久后以邮件形式发送到您的邮箱中，期待您的下次测试！"
        );
        window.location.href = "Wenjuan.vue";
      } else {
        alert("题目未完成，请继续答卷!");
      }
    },
  },
  created() {},
  mounted() {
    console.log(tests);
  },
};
</script>
<style scoped>
.el-header {
  background-color: whitesmoke;
  color: #333;
  text-align: center;
  line-height: 60px;
  font-size: 20px;
}
.el-main {
  background-color: white;
  color: #333;
}

.bg-purple-dark {
  background: white;
  font-size: 14px;
  margin-left: 10px;
  margin-top: 20px;
}
.tihao {
  display: flex;
  justify-content: space-around;
  margin-bottom: 15px;
}
.ti {
  display: inline-block;
  width: 25px;
  height: 25px;
  line-height: 27px;
  border: 1px solid #bbb;
  color: #bbb;
  border-radius: 50%;
  text-align: center;
}
.active {
  background-color: blue;
  color: white;
}
.up {
  margin-bottom: 20px;
  margin-right: 20px;
}
</style>